<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Defiant.js</title>
<style type="text/css">

body {
	background: #ddd;
}

.arrow {
	background: rgba(30,100,200,0.15);
	position: absolute;
	width: 100px;
	height: 30px;
	z-index: 2;
}
.arrow:after {
	content: '';
	position: absolute;
	top: -15px;
	left: 100%;
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid rgba(30,100,200,0.15);
}
.json-to-xml {
	top: 12%;
	left: 45%;
}
.xml-to-json {
	top: 42%;
	left: 38%;
	width: 250px;
	-webkit-transform: rotate( 135deg );
	-moz-transform:    rotate( 135deg );
	transform:         rotate( 135deg );
}
.back-json-xml {
	top: 72%;
	left: 45%;
}

pre {
	background: #fff;
	margin: 0px;
	position: absolute;
	top: 1%;
	bottom: 1%;
	width: 48.75%;
	height: 48.5%;
	border: #ccc 1px solid;
	border-radius: 5px;
	font-size: 1.35em;
	line-height: 1.25em;
	overflow: auto;
}

#j-output {
	color: #933;
	right: 0.75%;
}
#rj-output {
	color: #f00;
	right: 0.75%;
	top: 50.25%;
}
#x-output {
	color: #888;
	left: 0.75%;
}
#rx-output {
	color: #933;
	top: 50.25%;
}

</style>
<script type="text/javascript" src="../dist/defiant.min.js"></script>
</head>
<body>

<span class="arrow json-to-xml"></span>
<span class="arrow xml-to-json"></span>
<span class="arrow back-json-xml"></span>

<pre id="x-output"></pre>
<pre id="j-output"></pre>
<pre id="rx-output"></pre>
<pre id="rj-output"></pre>

<script type="text/javascript">

// development flag
defiant.env = 'development';

var s = ''+
		'<?xml version="1.0" encoding="UTF-8"?>'+
'<d:data xmlns:d="defiant-namespace" d:mi="3">'+
'    <subDirectoryF d:constr="null"/>'+
'    <subDirectoryF d:constr="String" d:mi="1">a</subDirectoryF>'+
'    <subDirectoryF d:constr="String" d:mi="2">b</subDirectoryF>'+
'</d:data>',

	doc = defiant.xmlFromString(s)
	, json = defiant.node.toJSON(doc)
	, d2
	, j2
	, str;


var xEl     = document.getElementById('x-output'),
	jEl     = document.getElementById('j-output'),
	rxEl    = document.getElementById('rx-output'),
	rjEl    = document.getElementById('rj-output');

str = defiant.node.prettyPrint(doc);
xEl.innerHTML  = str.replace(/</g, '&lt;')
					.replace(/>/g, '&gt;');

jEl.innerHTML  = JSON.stringify( json, null, '\t' )
					.replace(/\t/g, String().fill(defiant.tabsize));
/**/
d2 = defiant.json.toXML(json);

str = defiant.node.prettyPrint(d2);
rxEl.innerHTML = str.replace(/</g, '&lt;')
					.replace(/>/g, '&gt;');

rjEl.innerHTML = JSON.stringify( defiant.node.toJSON(d2), null, '\t' )
					.replace(/\t/g, String().fill(defiant.tabsize));

</script>

</body>
</html>